<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="${request.contextPath}/statics/css/materialize.css?r=2">
  <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/common.css" />
  <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/nuaaindex.css" />
</head>
<body>
<div id="rrapp" class="page flex-col">
  <div class="group_5 flex-col">
    <span class="text_14">联系我们</span>
    <div class="box_1 flex-col">
      <div class="group_6 flex-row">
        <div class="image-text_14 flex-row justify-between">
          <img
                  class="icon_2"
                  referrerpolicy="no-referrer"
                  src="${request.contextPath}/statics/img/nanhang-map.jpg"/>
          <div class="text-group_11 flex-col">
            <span class="text_15">南京航空航天大学</span>
            <span class="text_16">江苏省南京市白下区御道街29号</span>
          </div>
        </div>
      </div>
    </div>
    <div class="box_2 flex-col">
      <div class="group_8 flex-row justify-between">
        <img
                class="icon_3"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc44329ab7a243d542d04ae57468c7ab8625ae86968bfa7e9d4d244d460c716bd"
        />
        <div class="text-wrapper_3">
          <span class="text_17">姓名</span> <span class="text_18">*</span>
        </div>
      </div>
      <input type="text" class="" v-model="dataForm.guardian" placeholder="请输入姓名" required>
      <div class="group_9 flex-row justify-between">
        <img
                class="icon_4"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng47dc77206cc696de97f86fe1b7a678d82abf0ff3e4e1f35bee06561cca283a87"
        />
        <div class="text-wrapper_4">
          <span class="text_20">单位</span> <span class="text_21">*</span>
        </div>
      </div>
      <!--      <span class="text_22">请输入</span>-->
      <input type="text" class="" id="company" v-model="dataForm.school" placeholder="请输入单位" required>
      <div class="group_10 flex-row justify-between">
        <img
                class="icon_5"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng08ba0e0c249b5279f0ad3a10edfb51b1260ee759463877a1afcab54ea4732030"
        />
        <div class="text-wrapper_5">
          <span class="text_23">联系电话</span>
          <span class="text_24">*</span>
        </div>
      </div>
      <input type="text" class="" id="phone" v-model="dataForm.phone" placeholder="请输入联系电话" required>

      <div class="group_11 flex-row justify-between">
        <img
                class="thumbnail_3"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng65d30d057af12a30d79ab32b97453a2fe44cc4b6b676aefc876dbde8829e131b"
        />
        <span class="text_26">邮箱</span>
      </div>
      <input type="text" class="" id="email" v-model="dataForm.email" placeholder="请输入邮箱" required>
      <div class="group_12 flex-row justify-between">
        <img
                class="icon_6"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng26dce911716662ad9dfe8aacfafbdc9eed8a97ceb7d4f9c43561ec7103726458"
        />
        <div class="text-wrapper_6">
          <span class="text_28">省市地址</span>
          <span class="text_29">*</span>
        </div>
      </div>
      <div class="group_13 flex-row justify-between" style="width: 92%; height: 3rem;">
        <el-select class="text-group_5" style="width:50%;height:30px" v-model="province" placeholder="请选择">
          <el-option v-for="(item,index) in regionList" :label="item.name" :value="index" ></el-option>
        </el-select>
        <el-select style="width:50%;height:30px"  v-model="city" placeholder="请选择">
          <el-option v-for="(item,index) in cityList" :label="item.name" :value="index" ></el-option>
        </el-select>
      </div>
    </div>
    <button class="button_4 flex-col">
      <span class="text_33" @click="saveSign">提交</span>
    </button>
  </div>

</div>
<script src="${request.contextPath}/statics/js/jquery.min.js"></script>
<script src="${request.contextPath}/statics/js/materialize.min.js"></script>
<script src="${request.contextPath}/statics/js/owl.carousel.min.js"></script>
<script src="${request.contextPath}/statics/js/fakeLoader.min.js"></script>
<script src="${request.contextPath}/statics/js/contact-form.js"></script>
<script src="${request.contextPath}/statics/js/main.js"></script>
<script src="../statics/js/vue.min.js"></script>

<script>


  var vm = new Vue({
    el: '#rrapp',
    data: {
      newsId: '',
      categoryId: '',
      about: {},
      expertList: [],
      dataForm: {
        guardian: '',
        school: '',//单位
        phone: '',
        email: '',
        address: '',
        intention: '',
        categoryId: '',
      },
      regionList: [], //后台获取地区数组
      province: '',
      city: '',
      district :'',
      cityList: [],
      districtList: [],
    },
    watch:{
      province(newValue){
        if(newValue) {
          vm.cityList = vm.regionList[newValue].children
        }
      },
      city(newValue) {
        if(newValue) {
          vm.districtList = vm.cityList[newValue].children
        }
      },
      district(newValue){
        if(newValue) {
          vm.dataForm.address = vm.regionList[vm.province].name + vm.cityList[vm.city].name + newValue
        }
      }
    },
    async created() {
      var url = location.search; //获取url中"?"符后的字串
      var tRequest = new Object();
      if (url.indexOf("?") != -1) {   //判断 URL 中是否包含查询字符串
        var str = url.substr(1);   //如果 URL 中包含查询字符串，截取查询字符串，去掉前面的“?”号。
        strs = str.split("&");    //将查询字符串按“&”号分割成一个个参数对。
        for (var i = 0; i < strs.length; i++) {    //循环遍历所有的参数对。
          tRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);    //对每一个参数对进行处理，将参数名和参数值存储到 tRequest 对象中。
        }
      }
      this.categoryId = tRequest.categoryId
      this.dataForm.categoryId = tRequest.categoryId
      this.newsId = tRequest.newsId
      this.queryRegion()
    },
    methods: {
      saveSign(){
        // 校验表单数据
        if(!this.dataForm.guardian){
          alert('请输入姓名')
          return
        }
        if(!this.dataForm.school){
          alert('请输入单位')
          return
        }
        if(!this.dataForm.phone){
          alert('请输入联系电话')
          return
        }

        $.ajax({
          type: 'GET',
          url: '${request.contextPath}/h5/saveSign',
          data: vm.dataForm,
          success: function (res) {
            if(res.code === 0){
              console.log(res)

            }else{
              alert(res.msg);
            }
            vm.dataForm = {}
            vm.province = ''
            vm.city = ''
            vm.district = ''
            vm.dataForm.categoryId = vm.categoryId
          }
        })
      },

      queryRegion(){
        $.ajax({
          type: 'GET',
          url: '${request.contextPath}/h5/queryRegion',
          data: {},
          success: function (res) {
            if (res.code === 0) {
              vm.regionList = res.data
            }
          }
        })
      },

    },


  })
</script>